<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 物流线路分析
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container clearfix">
            <div class="clearfix">
                <div class="block" style="float: left;">
                    <el-tag type="info" size="large">发货地：</el-tag>
                    <el-cascader
                        v-model="value1"
                        :options="options1"
                        :props="{ expandTrigger: 'hover' }"
                        ></el-cascader>
                    &nbsp;
                    <el-tag type="info" size="large">收货地：</el-tag>
                    <el-cascader
                        v-model="value12"
                        :options="options2"
                        :props="{ expandTrigger: 'hover' }"
                        ></el-cascader>
                    &nbsp;
                    <el-tag type="info" size="large">选择时间：</el-tag>
                    <el-date-picker
                    v-model="value3"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss" 
                    @change="getSTime"
                    ></el-date-picker>
                </div>
                <div style="float: right;">
                    <el-button type="primary" round  @click='findData'>信息按钮</el-button>
                </div>
            </div><br>
            <div class="amp-demo" style="float: left;" >
            <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" style="width: 850px;" v-if="reFresh">
                <!-- 点坐标  -->
                <el-amap-marker :position="marker.position" :visible="marker.visible" :draggable="marker.draggable" vid="index" ></el-amap-marker>
                <el-amap-marker :position="marker2.position" :visible="marker2.visible" :draggable="marker2.draggable" vid="index2"></el-amap-marker>
                <el-amap-text v-for="(text,index) in texts" :key="index" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
                <!-- 折线 -->
                <el-amap-polyline :editable="polyline.editable"  :path="polyline.path" >
                </el-amap-polyline>
            </el-amap>   
            </div>
            <div style="float: right;">
                    <el-card class="box-card">
                        <!-- <div v-for="(item, index) in yundan" :key="index" class="text item">
                            <span>订单号：</span>{{item.order_id}}
                        </div> -->
                        <el-table
                            :data="yundan"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column prop="order_id" label="订单号"></el-table-column>
                            <el-table-column prop="type" label="设备类型"></el-table-column>
                            <el-table-column prop="gname" label="货物类型"></el-table-column>
                            <el-table-column label="运单状态">
                                <template slot-scope="scope">{{scope.row.status | active_status}}</template>
                            </el-table-column>
                            <el-table-column label="报警状态">
                                <template slot-scope="scope">{{scope.row.is_alert | active_alert}}</template>
                            </el-table-column>
                        </el-table>
                    </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import { getcity,getwuliu } from '../../api/api';
export default {
    name: 'wuliu',
    data() {
        return {
            value1: [],
            value12: [],
            value3: [],
            options1: [],
            options2: [],
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            slotStyle: {
                padding: '2px 8px',
                background: '#eee',
                color: '#333',
                border: '1px solid #aaa'
            },
            zoom: 12,
            center: [121.5273285, 31.25515044],
            polyline: {
                path: [[121.5389385, 31.21515044], [120.5273285, 30.21234044]],
                editable: false
            },
            marker: {
                position: [121.5273285, 31.21515044],
                visible: true,
                draggable: false,
                content:'2',
                template: '<span>2</span>',
            },
            marker2: {
                position: [120.5273285, 30.21234044],
                visible: true,
                draggable: false,
                content:'1',
                template: '<span>1</span>',
            },
            texts: [
                {
                    position: [121.5273285, 31.21515044],
                    text: '收货地',
                    offset: [0, -70],
                },
                {
                    position: [120.5273285, 30.21234044],
                    text: '发货地',
                    offset: [0, -70],
                },
            ],
            reFresh:true,
            disabled:true,
            yundan:'',
        };
    },
    created() {
        this.getData();
    },
    methods: {
        menuTree(){
            this.reFresh= false
            this.$nextTick(()=>{
                this.reFresh = true
            })
        },
        getData(){
            getcity().then(res=>{
                this.options1 = res
                this.options2 = res
                // console.log(res)
            })
        },
        findData(){
            
            var params = {
                addr_fa:JSON.stringify(this.value1),
                addr_shou:JSON.stringify(this.value12),
                time:JSON.stringify(this.value3)
            }
            getwuliu(params).then(res=>{
                var addr_shou_jing = parseFloat(res.loc_shou.split(',')[0])
                var addr_shou_wei = parseFloat(res.loc_shou.split(',')[1])
                var addr_fa_jing = parseFloat(res.loc_fa.split(',')[0])
                var addr_fa_wei = parseFloat(res.loc_fa.split(',')[1])
                this.center[0] = addr_fa_jing
                this.center[1] = addr_fa_wei
                this.polyline.path[0][0] = addr_fa_jing
                this.polyline.path[0][1] = addr_fa_wei
                this.polyline.path[1][0] = addr_shou_jing
                this.polyline.path[1][1] = addr_shou_wei
                this.marker2.position[0] = addr_fa_jing
                this.marker2.position[1] = addr_fa_wei
                this.marker.position[0] = addr_shou_jing
                this.marker.position[1] = addr_shou_wei
                this.texts[0].position[0] = addr_shou_jing
                this.texts[0].position[1] = addr_shou_wei
                this.texts[1].position[0] = addr_fa_jing
                this.texts[1].position[1] = addr_fa_wei
                this.yundan = JSON.parse(res.data)
                // console.log(this.yundan)
                this.menuTree()
            })
        },
        getSTime (val) {
            this.value3 = val
        },
    },
    filters:{
        active_status(val){
            if (val>0) {
                return '完成'
            }else{
                return '在途'
            }
        },
        active_alert(val){
            if (val>0) {
                return '报警'
            }else{
                return '正常'
            }
        },
    },
    watch:{
        
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.clearfix {
        height: auto;
        *zoom: 1
}
.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}    
.clearfix:after {
    clear: both
}
.amap-demo {
    height: 500px;
}
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 700px;
    height: 500px;

}
</style>
